<template>
	<view>
		<u-navbar :is-back="false" background="#f1f2f6" :border-bottom="false"></u-navbar>
		<view class="image-id">
			<view class="text-id">
				<view>在线专业证件照</view>
				<view>十秒快速制作</view>
				<view class="text-item">
					Nice ID Photo
				</view>
			</view>
			<image class="item-image" src="../../static/images/pg.png" mode="aspectFit"></image>
		</view>
		<view class="content">
			<view class="heard">
				<view class="heard-card color1" @click="toPage('make')">
					<image src="../../static/images/zz.png" mode=""></image>
					<view>证件照制作</view>
				</view>
				<view class="heard-card color2" @click="toPage('change')">
					<image src="../../static/images/ds.png" mode=""></image>
					<view>更换底色</view>
				</view>
				<view class="heard-card color3" @click="toPage('cutting')">
					<image src="../../static/images/cj.png" mode=""></image>
					<view>裁剪证件照</view>
				</view>
			</view>
			<view class="text">
				<view class="text-heard">规格参考</view>
				<view class="text-card">
					<view class="card-item" v-for="(item,index) in list" :key="index">
						<view style="color: #000000;font-size: 34rpx;">{{item.title}}</view>
						<view style="color: #999999;font-size: 28rpx;">像素尺寸: {{item.desc}} px</view>
						<u-tag :text="item.mask" type="info" mode="plain" size="mini" class="mask" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pixel
	} from './data.js'
	export default {
		data() {
			return {
				list: pixel,
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				console.log(res.target)
			}
			return {
				title: '一键工具箱',
				path: '/pages/index/index'
			}
		},
		methods: {
			toPage(page) {
				uni.navigateTo({
					url: `/pages/index/${page}`,
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f1f2f6;
	}
</style>

<style lang="scss" scoped>
	page {
		background-color: #f1f2f6;

		.image-id {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin: 0 30rpx;
			border-bottom: 1px solid #CCCCCC;
			width: 690rpx;

			.text-id {
				font-size: 48rpx;
				line-height: 70rpx;
				font-weight: bold;
				letter-spacing: 6rpx;

				.text-item {
					letter-spacing: 0;
					font-size: 38rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.item-image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.content {
			.heard {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				height: 280rpx;
				width: 690rpx;

				.heard-card {
					width: 200rpx;
					height: 200rpx;
					padding: 20rpx;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					box-shadow: 0 5px 8px #aaaaaa;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 10rpx;
					}
				}

				.color1 {
					background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
				}

				.color2 {
					background-image: linear-gradient(135deg, #FEB692 10%, #EA5455 100%);
				}

				.color3 {
					background-image: linear-gradient(135deg, #CE9FFC 10%, #7367F0 100%);
				}
			}

			.text {
				margin: 0 30rpx;
				width: 690rpx;

				.text-heard {
					font-size: 38rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}

				.text-card {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					width: 690rpx;

					.card-item {
						width: 330rpx;
						margin-bottom: 30rpx;
						padding: 20rpx;
						line-height: 50rpx;
						border-radius: 16rpx;
						background: #fefefe;

						.mask {
							margin-top: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
